<template>
  <div class="video-detail-container">
    <div class="left-container">
      <div class="video-info-container">
        <div class="video-info-title">{{ videoDetail.title }}</div>
        <div class="video-info-count">
          <span>
            <img src="@/assets/videoicon/viewCount.png" alt="" />
            {{ viewCount }}
          </span>
          <span>
            <img src="@/assets/videoicon/danmuCount.png" alt="" />
            {{ danmuCount }}
          </span>
          <span>
            {{ videoDetail.createTime }}
          </span>
          <span>
            <img src="@/assets/videoicon/jinzhi.png" alt="" />
            未经作者授权，禁止转载
          </span>
        </div>
      </div>
      <!--      播放器页面站位DOM-->
      <div id="bili-player"></div>
      <div class="danmu-bar">
        <!--        数据统计-->
        <div class="danmu-bar-video-info">
          {{ onWatching }}人正在看，已装填{{ danmuCount }}条弹幕
        </div>
        <!--        弹幕操作-->
        <div class="danmu-bar-operation">
          <div class="danmu-bar-sender">
            <input
              class="danmu-bar-sender-input"
              v-model="danmuText"
              placeholder="发个友善的弹幕见证当下"
              autocomplete="off"
              @keyup.enter="sendDanmu"
            />
            <el-button type="primary" @click="sendDanmu">发送</el-button>
          </div>
        </div>
      </div>
      <!--        点赞、投币、收藏-->
      <div class="video-tools-bar">
        <div class="video-tools-bar-left">
          <div class="like-coin-collect">
            <!--            要能动态的切换图片-->
            <img :src="likeIcon" alt="" @click="addOrDeleteLikeCount" />
            {{ likeCount }}
          </div>
          <div class="like-coin-collect">
            <!--              投币不能取消投币-->
            <img :src="coinIcon" alt="" @click="addCoinCount" />
            {{ coinCount }}
          </div>
          <div class="like-coin-collect">
            <img :src="collectIcon" alt="" @click="addOrDeleteCollectCount" />
            {{ collectCount }}
          </div>
        </div>
      </div>
      <!--      视频描述和标签-->
      <div class="left-container-under-player">
        <!--          视频描述-->
        <div class="video-detail-description">
          {{ videoDetail.description }}
        </div>
        <!--          视频标签-->
        <div class="video-detail-tags">
          <el-tag
            type="info"
            style="margin-right: 20px; font-size: 16px"
            v-for="tag in videoDetail.videoTagList"
            :key="tag.tagId"
          >
            {{ tag.tagName }}
          </el-tag>
        </div>
      </div>

      <!--      登录评论区-->
      <VideoComment :isLogin="true" />
    </div>
    <div class="right-container">
      <div class="up-info-container">
        <div class="up-avatar">
          <img src="@/assets/bilibiliavatar.png" alt="UP主头像" />
        </div>
        <div class="up-info-right">
          <div class="up-info-detail">{{ videoDetail.nickname }}</div>
        </div>
        <div class="up-operation">
          <el-button type="primary" v-if="isFollowed">已关注</el-button>
          <el-button
            type="primary"
            v-else
            @click="addUserFollowings(videoDetail.userId)"
          >
            关注
          </el-button>
          <!--          登录注册对话框-->
        </div>
      </div>
      <!--      弹幕列表-->
      <div class="danmu-box">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="弹幕列表" name="1">
            <el-table :data="tableData" style="width: 100%; height: 500px">
              <el-table-column
                label="时间"
                prop="danmuTime"
                width="60"
              ></el-table-column>
              <el-table-column
                label="弹幕内容"
                prop="txt"
                width="260"
              ></el-table-column>
              <el-table-column
                label="发送时间"
                prop="createTime"
                width="180"
              ></el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import Player from 'xgplayer'
import Danmu from 'xgplayer/es/plugins/danmu'
import 'xgplayer/es/plugins/danmu/index.css'
import 'xgplayer/dist/index.min.css'
import likeActive from '@/assets/videoicon/dianzan2.png' // 点赞激活状态图标路径
import likeInactive from '@/assets/videoicon/dianzan1.png' // 点赞未激活状态图标路径
import coinActive from '@/assets/videoicon/toubi2.png' // 投币激活状态图标路径
import coinInactive from '@/assets/videoicon/toubi1.png' // 投币未激活状态图标路径
import collectActive from '@/assets/videoicon/shoucang2.png' // 收藏激活状态图标路径
import collectInactive from '@/assets/videoicon/shoucang1.png'
import VideoComment from '@/components/VideoComment.vue'

const viewCount = ref(1000)
const isFollowed = ref(true)

const activeNames = ref(['1'])

// 定义是否喜欢的状态
const isLiked = ref(false)
const tableData = ref([])
const isCoin = ref(true)
const isCollect = ref(false)
const player = ref(null)
const danmuText = ref('')
const danmuCount = ref(100)
const onWatching = ref(8)
const likeCount = ref(8)
const coinCount = ref(8)
const collectCount = ref(8)
const ws = ref(null)
const defaultDanmuConfig = reactive({
  duration: 5000, //弹幕持续5s,
  style: {
    color: '#fff',
    padding: '5px 11px',
  },
})
const videoDetail = reactive({
  title: 'title',
  createTime: '',
  nickname: '严神',
  userId: 1,
  description:
    '微博：@笑笑_孙亚龙 @西卡_李浩宇 @小孩kiddddd @dys渔不沮 @dys融融子 @释梦398 @DYS-嚣张花卷 @dys龙舌兰\n' +
    '百度贴吧：德云色',
  avatar: '',
  videoTagList: [
    {
      tagId: 1,
      tagName: '黑莓',
    },
    {
      tagId: 2,
      tagName: '德云色',
    },
    {
      tagId: 3,
      tagName: '西卡',
    },
    {
      tagId: 4,
      tagName: '笑笑',
    },
    {
      tagId: 5,
      tagName: 'KID',
    },
  ],
})
onMounted(() => {
  initPlayer()
  getDanmu()
})
// 使用 computed 创建计算属性来动态选择图标
const likeIcon = computed(() => {
  return isLiked.value ? likeActive : likeInactive
})
const coinIcon = computed(() => {
  return isCoin.value ? coinActive : coinInactive
})
const collectIcon = computed(() => {
  return isCollect.value ? collectActive : collectInactive
})
//获取用户关注列表，遍历查看是否已关注
//初始化视频
const initPlayer = () => {
  player.value = new Player({
    id: 'bili-player',
    url: 'https://bubble-video.oss-cn-chengdu.aliyuncs.com/bubble/video/6.%20%E4%BB%80%E4%B9%88%E6%98%AF%E4%B9%90%E8%A7%82%E9%94%81%EF%BC%9F.mp4',
    width: '800px',
    height: '450px',
    plugins: [Danmu],
    lang: 'zh',
    //画中画
    pip: true,
    controls: true,
    danmu: {
      comments: [
        //弹幕数组
        {
          // duration: 15000, //弹幕持续显示时间,毫秒(最低为5000毫秒)
          // id: '1', //弹幕id，需唯一
          // start: 3000, //弹幕出现时间，毫秒
          // prior: true, //该条弹幕优先显示，默认false
          // color: true, //该条弹幕为彩色弹幕，默认false
          txt: '长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕长弹幕', //弹幕文字内容
          style: {
            //弹幕自定义样式
            color: '#fff',
            fontSize: '20px', // 注意这里是字符串形式
            padding: '5px 11px',
          },
          // mode: 'top', //显示模式，top顶部居中，bottom底部居中，scroll滚动，默认为scroll
        },
      ],
      area: {
        //弹幕显示区域
        start: 0, //区域顶部到播放器顶部所占播放器高度的比例
        end: 1, //区域底部到播放器顶部所占播放器高度的比例
      },
      fontSize: 22,
    },
  })
  player.value.danmu.setFontSize(22, 24)
  //增加视频播放量
  // this.player.danmu.setFontSize('20', '24')
  // this.player.on(Events.ENDED, async () => {
  //   let params = {
  //     videoId: this.$route.query.videoId,
  //   }
  //   await videoApi.addVideoViews(params)
  //   this.viewCount++
  // })
}
//发送弹幕
const sendDanmu = () => {
  if (!this.isUserLoggedIn) {
    this.showLoginDialog = true
    return
  }
  if (this.danmuText) {
    const danmuText = this.danmuText
    const danmuTime = Math.floor(this.player.currentTime * 1000)
    let danmuMessage = {
      start: danmuTime,
      txt: danmuText,
      //弹幕持续时长
      duration: defaultDanmuConfig.duration,
      style: defaultDanmuConfig.style,
    }
    //发送弹幕到后端进行保存
    let params = {}
    params.content = danmuMessage
    params.videoId = this.$route.query.videoId
    params.danmuTime = danmuTime
    this.ws.send(JSON.stringify(params))
    //在前端播放器发送弹幕
    this.danmuText = ''
    danmuMessage.id = 1
    this.player.danmu.sendComment(danmuMessage)
  }
}
//初始化webSocket,onMounte使用
const initWebSocket = () => {
  const url = 'ws://localhost:15005/imserver/' + localStorage.getItem('token')
  console.log(url)
  this.ws = new WebSocket(url)
  this.ws.onmessage = (event) => {
    const msgObj = JSON.parse(event.data)
    console.log('接收到后端的消息：', msgObj)
    // 如果消息类型是弹幕，则调用播放器发送弹幕
    if (msgObj.txt) {
      console.log('接收到弹幕：', msgObj)
      this.player.danmu.sendComment(msgObj)
    }
    //在线人数通知消息处理
    if (msgObj.onlineCount) {
      this.onWatching = msgObj.onlineCount
    }
  }
}
//获取弹幕
const getDanmu = () => {}
</script>

<style scoped lang="scss">
.video-detail-container {
  display: flex;
  justify-content: center;
  .left-container {
    display: flex;
    flex-direction: column;
    .video-info-container {
      display: flex;
      height: 108px;
      flex-direction: column;
      justify-content: center;

      .video-info-title {
        font-size: 24px;
        margin-bottom: 5px;
      }
      .video-info-count {
        font-size: 13px;
        align-items: center;
        color: gray;
        display: flex;
        span {
          display: flex;
          align-items: center;
          margin-right: 20px;
          img {
            height: 25px;
            width: 25px;
            border-radius: 2px;
            margin-right: 5px;
          }
        }
      }
    }
    .danmu-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #d5d2d2;
      border-radius: 2px;
      .danmu-bar-video-info {
        width: 100%;
      }
      .danmu-bar-operation {
        display: flex;
        height: 40px;
        width: 100%;
        border-radius: 8px;
        background: #f4f4f4;

        .danmu-bar-sender {
          display: flex;
          width: 100%;
          align-items: center;
          border: none;
          border-radius: 8px 0 0 8px;
          height: 100%;

          .danmu-bar-sender-input {
            outline: none;
            background: none;
            border: 0;
            color: #212121;
            height: 28px;
            line-height: 28px;
            min-width: 100px;
            padding: 0 5px;
            width: 100%;
          }
        }
      }
    }
    .video-tools-bar {
      margin-top: 10px;
      display: flex;
      border-bottom: 1px solid #d5d2d2;
      .video-tools-bar-left {
        width: 100%;
        display: flex;
        margin-bottom: 10px;
        .like-coin-collect {
          display: flex;
          align-items: center;
          margin-right: 35px;
          img {
            height: 28px;
            width: 28px;
            margin-right: 5px;
            cursor: pointer;
          }
        }
      }
    }
    .left-container-under-player {
      .video-detail-description {
        max-width: 800px;
        margin: 18px 0;
      }
    }
  }
  .right-container {
    margin-left: 30px;
    display: flex;
    flex-direction: column;

    .up-info-container {
      display: flex;
      align-items: center;
      height: 108px;
      .up-avatar {
        img {
          width: 60px;
          height: 60px;
          border-radius: 5px;
        }
      }
      .up-info-right {
        padding: 20px;
        .up-info-detail {
          color: #fb7299;
        }
      }
    }

    .danmu-box {
      width: 500px;
    }
  }
}
</style>
